<template>
  <el-main class="main">
    <div class="main-header">
      <div class="header-search">
        <span style="margin-right: 10px">请选择体检项目:</span>

        <el-select
          v-model="input"
          class="m-2"
          style="width: 240px"
          placeholder="请选择体检项目"
        >
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
        
        <span style="margin-left: 10px">症状:</span>

          <el-select
            v-model="input2"
            class="m-2"
            style="width: 240px ;"
            placeholder="请选择症状"
          >
            <el-option
              v-for="item in results"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>

          <span>
          <el-button type="primary" style="margin-left: 15px" @click="searchData"
            >搜索</el-button
          >
          <el-button type="primary" style="margin-left: 15px" @click="resetSearch"
            >清空</el-button
          >
        </span>
      </div>
    </div>
    <div class="main-body">
      <el-row>
        <el-col :span="24">
          <el-table
            :data="userList"
            v-loading="loading"
            style="width: 100%"
          >
            <el-table-column width="50" style="text-align: center"/>
            <el-table-column label="症状id" prop="rpId" style="text-align: center" />
            <el-table-column width="50" style="text-align: center"/>
            <el-table-column label="体检项目" prop="project" style="text-align: center" />
            <el-table-column width="50" style="text-align: center"/>
            <el-table-column label="症状名称" prop="result" style="text-align: center" />
          </el-table>
     
        </el-col>
      </el-row>
    </div>
  </el-main>
</template>

<script setup>
import { ref, onMounted,watch} from "vue";
import axios from "axios";



const input = ref();
const options = ref();
const userList = ref([]);
const results = ref();
const input2 = ref();

onMounted(() => {
  axios
    .get(`http://localhost:8080/ResultProject/projects`)
    .then((result) => {
      options.value =  result.data.data;
      
    })
    .catch((err) => {});
});

const searchData = ()=>{
  userList.value = [];
  axios.get(`http://localhost:8080/ResultProject/queryOne?result=${input2.value}`).then((result) => {
    userList.value = result.data.data;
  }).catch((err) => {
    
  });
};

const searchResult = () => {
  userList.value = [];
  axios.get(`http://localhost:8080/ResultProject/queryResult?project=${input.value}`).then((result) => {
    results.value = result.data.data;
  }).catch((err) => {
    
  });
};
watch (input ,()=>{
  searchResult();
});




const resetSearch = () => {
  userList.value=[];
  input.value = "";
};
</script>

<style lang="scss">
.main {
  height: 100%;
  background-color: rgb(250, 252, 253);

  .main-body {
    margin-top: 14px;
    border-radius: 10px;
    height: calc(86vh - 100px);
    background-color: rgb(255, 255, 255);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  }

  .main-header {
    height: 80px;
    border-radius: 10px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    background-color: rgb(255, 255, 255);
    
    .header-search {
      padding: 10px 0 0 10px;
      margin-top: auto;
      margin-bottom: auto ;
      margin-left: 15px;
     position: relative;
     top: 12px;
    }
  }
}
</style>
